<template>
  <div v-if="crud.status.cu > 0">
    <el-drawer
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0"
      direction="rtl"
      :before-close="crud.cancelCU"
      :wrapper-closable="false"
      size="600"
    >
      <div class="leisure-drawer__content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="100px"
        >

          <div v-if="menuType === 1">
            <el-form-item label="菜单标题" prop="title">
              <el-input v-model="form.title" placeholder="请输菜单标题" clearable />
            </el-form-item>
            <el-form-item label="菜单编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入菜单编码或组件名称" clearable />
            </el-form-item>
            <el-form-item label="权限编码" prop="permission">
              <el-input v-model="form.permission" placeholder="请输入权限编码" clearable />
            </el-form-item>
            <el-form-item label="上级菜单" prop="parentId">
              <treeselect
                v-model="form.parentId"
                :options="sysMenusWithTop"
                style="width: 300px;"
                placeholder="选择上级菜单"
                no-results-text="没有查找到"
                no-children-text="没有子项"
                :normalizer="normalizer"
                :default-expand-level="1"
              />
            </el-form-item>
            <el-form-item label="访问路径" prop="path">
              <el-input v-model="form.path" placeholder="请输入访问路径" clearable />
            </el-form-item>
            <el-form-item label="是否外链">
              <el-switch
                v-model="form.isOutside"
                :active-value="1"
                :inactive-value="0"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
            <el-form-item v-if="form.isOutside === 1" label="打开方式">
              <el-switch
                v-model="form.openType"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="2"
                :inactive-value="1"
                active-text="内部嵌入"
                inactive-text="新页面(窗口)"
              />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
              <el-popover
                placement="bottom"
                :width="500"
                trigger="click"
              >
                <sys-icons :callback="submitIcon" />
                <el-input slot="reference" v-model="form.icon" placeholder="请选择图标" :readonly="true">

                  <el-button v-if="!form.icon" slot="append" icon="el-icon-document" />
                  <el-button v-else-if="form.icon && form.icon.startsWith('el-')" slot="append" :icon="form.icon" />
                  <el-button v-else slot="append">
                    <svg-icon :icon-class="form.icon" />
                  </el-button>
                </el-input>
              </el-popover>
            </el-form-item>
            <el-form-item
              label="排序"
              prop="paixu"
            >
              <el-input-number
                v-model.number="form.paixu"
                :min="0"
                :max="999"
                controls-position="right"
                placeholder="数字越大，优先级越高"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="备注信息" />
            </el-form-item>
          </div>
          <div v-if="menuType === 4">  <!--菜单类型为按钮时，直接指定上级parent-->
            <input v-model="form.parentId" hidden="hidden">
            <el-form-item label="按钮名称" prop="title" clearable>
              <el-input v-model="form.title" placeholder="请输入按钮名称" clearable />
            </el-form-item>
            <el-form-item label="按钮code" prop="code">
              <el-input v-model="form.code" placeholder="code-跟前端代码中的编码对应" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="备注信息" />
            </el-form-item>
          </div>

        </el-form>

        <div class="leisure-drawer__footer">
          <el-button
            @click="crud.cancelCU"
          >
            取消
          </el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import CRUD, { form } from '@crud/crud'
import icons from '@/utils/IconList'
import sysIcons from '@/views/components/sysIcons'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
const defaultForm = {
  id: null,
  title: '',
  path: '#',
  code: '',
  parentId: '0',
  menuType: 1, // 类型   1：目录   2：菜单   4：按钮
  isOutside: 0, // 是否是外接系统,0:内网资源，1是外接资源，外链资源
  openType: 2, // web端打开方式，1：新页面(新窗口)打开  2:当前页面框架中打开
  icon: 'tree',
  paixu: 1,
  status: 1,
  remark: null,
  lockVersion: 0,
  permission: null
}
export default {
  components: { sysIcons, Treeselect },
  mixins: [form(defaultForm)],
  props: {
    menuType: { // 添加菜单的类型，1为菜单，4为按钮
      type: Number,
      default: () => { return 1 }
    },
    sysMenus: {
      type: Array,
      default: () => { return [] }
    },
    parent: {
      type: Object,
      default: () => { return {} },
      id: {
        type: [String, Number],
        default: () => { return '0' }
      },
      title: {
        type: String,
        default: () => { return '' }
      }
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title',
        value: 'id'
      },
      normalizer(node) {
        // 去掉children=[]的children属性 respectively
        if (node.children && !node.children.length) {
          delete node.children
        }
        if (node.depName) {
          node.label = node.depName
        }
      },
      icons: {},
      rules: {
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        paixu: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  computed: {
    sysMenusWithTop: function() {
      const menus = []
      const menu = { id: 0, label: '顶级菜单', children: [] }
      menu.children = this.sysMenus
      menus.push(menu)
      return menus
    }
  },
  watch: {
    'form.code': function(val) {
      if (this.crud.status.add > 0) {
        this.form.permission = val
      }
    }
  },
  created() {
    this.getIconList()
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.beforeValidateCU]() {
      this.form.menuType = this.menuType
      if (!this.form.permission) {
        this.form.permission = this.form.code
      }
    },
    submitIcon(iconname) {
      this.form.icon = iconname
    },
    getIconList() {
      this.icons = icons
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
  .treeSelectDropdown{
    height:100%;
    background-color: #fff;
    padding: 2px 2px;
  }

</style>
